<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>layuiAdmin 内容系统 - 文章列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../static/layui/dist/layuiadmin/layui/css/layui.css" media="all">

<body>
  <div style="margin: 30px ;">
    <div class="layui-fluid">
      <div class="layui-row">
        <div class="layui-col-xs-6">
          <div class="demoTable">
            搜索角色：
            <div class="layui-inline">
              <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
            <button class=" layui-btn" onclick="add()">添加</button>

          </div>
        </div>
      </div>
    </div>
    <table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table>
  </div>
  <script src="../../../static/layui/dist/layuiadmin/layui/layui.js"></script>
  <script>
    layui.use('table', function () {
      var table = layui.table;

      //方法级渲染
      table.render({
        elem: '#LAY_table_user'
        , url: 'init'
        , cols: [[
          { field: 'id', title: 'ID', width: 160, sort: true, fixed: true }
          , { field: 'name', title: '角色名称', width: 320, sort: true }
          , { field: 'desc', title: '角色描述', sort: true, edit: true }
          ,
          { field: 'right', title: '操作', width: 300, toolbar: "#barDemo" }
        ]
        ]
        , id: 'testReload'
        , page: true
        , height: 600
        , size: "lg"
      });
      var $ = layui.$, active = {
        reload: function () {
          var demoReload = $('#demoReload');

          table.reload('testReload', {
            page: {
              curr: 1
            },
            where: {
              keyword: demoReload.val()
            }
          });
        }
      };
      $('.demoTable .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
      table.on('tool(useruv)', function (obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
          layui.use('layer', function () {
            layer.open({
              type: 2,
              content: ["detail?id=" + data.id],   //添加页，后台controller转发到指定页
              area: ["600px", "400px"],
              title: ['角色查看'],
              fixed: false,
              //maxmin: true,
              shadeClose: true,
              end: function () {  //刷新页面
                location.reload();
              }
            })
          })
        } else if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
            console.log(data);
            $.ajax({
              url: "del",
              type: "POST",
              data: { "id": data.id },
              dataType: "json",
              success: function (data) {

                if (data.state == 1) {
                  //删除这一行
                  obj.del();
                  //关闭弹框
                  layer.close(index);
                  layer.msg("删除成功", { icon: 6 });
                } else {
                  layer.msg("删除失败", { icon: 5 });
                }
              }
            });
          });
        } else if (obj.event === 'edit') {
          layui.use('layer', function () {
            layer.open({
              type: 2,
              content: ["edit?id=" + data.id],   //添加页，后台controller转发到指定页
              area: ["600px", "400px"],
              title: ['角色修改'],
              fixed: false,
              //maxmin: true,
              shadeClose: true,
              end: function () {  //刷新页面
                location.reload();
              }
            })
          })
        } else if (obj.event === 'deploy') {
          layui.use('layer', function () {
            layer.open({
              type: 2,
              content: ["deploy?id=" + data.id],   //添加页，后台controller转发到指定页
              area: ["600px", "400px"],
              title: ['给予权限'],
              fixed: false,
              //maxmin: true,
              shadeClose: true,
              end: function () {  //刷新页面
                location.reload();
              }
            })
          })
        }
      });
    });
    function add() {
      layui.use('layer', function () {
        layer.open({
          type: 2,
          content: ["preAdd"],   //添加页，后台controller转发到指定页
          area: ["1000px", "500px"],
          title: ['用户添加'],
          fixed: false,
          //maxmin: true,
          shadeClose: true,
          end: function () {  //刷新页面
            location.reload();
          }
        })
      })
    }

  </script>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini" lay-event="deploy">给予权限</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>
</body>

</html>